<template>
    <view class="container">
        <view class="status_bar"></view>
        <!--头部-->
        <view class="head flex-row" :style="{'padding-right': posRight}">
            <view class="title">通讯录</view>
            <view @tap="addFriend">添加</view>
        </view>
        <!--容器-->
        <scroll-view scroll-y class="list" >
            <view class="space"></view>
            <view v-for="(item, index) in list" :key="index" class="item flex-row" @tap="toDetail(item)">
                <view class="cover flex-row">
                    <image :src="item.friendAvatar" class="icon"></image>
                    <view class="tag empty flex-row flex-column"></view>
                </view>
                <view class="title flex-row">{{ item.friendNickname }}</view>
            </view>

            <!--添加好友-->
            <uni-popup ref="addFriend">
                <view class="add-friend">
                    <view class="title">添加好友</view>
                    <input class="input" v-model="telephone" type="text" placeholder="请输入手机号"/>
                    <view @tap="addFriendAction" class="btn" :class="{disabled: !telephone}">添加</view>
                    <view @tap="cancelAdd" class="close">
                        <uni-icons type="closeempty" size="26" color="#999"></uni-icons>
                    </view>
                </view>
            </uni-popup>
        </scroll-view>
    </view>
</template>

<script>
    import contacts from "@/api/contacts";
    import listMixins from "@/components/listMixins";

    export default {
        mixins: [listMixins],
        data() {
            return {
                posRight: '15px',
                list: [],
                telephone: ''
            }
        },
        onLoad() {
            // #ifdef MP-WEIXIN
            let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
            this.posRight = (menuButtonInfo.width + 20) + 'px';
            // #endif
            this.refresh();
        },
        methods: {
            // 取消添加
            cancelAdd() {
                this.$refs.addFriend.close();
                this.telephone = ''
            },
            // 添加好友
            addFriend() {
                this.$refs.addFriend.open()
            },
            addFriendAction() {
                if (!this.telephone) {
                    uni.showToast({
                        title: '请输入用户名',
                        icon: 'none'
                    });
                    return;
                }
                contacts.add(this.telephone)
                    .then(res => {
                        uni.showToast({
                            title: '添加成功',
                            icon: 'none'
                        });
                        this.$refs.addFriend.close()
                        this.telephone = '';
                        this.refresh();
                    })
                    .catch(res => {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        });
                    });
            },
            // 详情
            toDetail(item) {
                let data = {
                    id: item.friendId,
                    avatar: item.friendAvatar,
                    name: item.friendNickname,
                    type: this.$msgConst.targetType.SINGLE.key
                };
                this.$Router.push({name: 'chatIndex', params: {data}});
            },
            // 获取好友列表
            getList(listQuery, loadMore) {
                contacts.getList(listQuery.pageNum, listQuery.pageSize)
                    .then(res => {
                        this.list = res.data.data;
                        setTimeout(function () {
                            uni.stopPullDownRefresh()
                        },500);
                    })
                    .catch(err => {
                        setTimeout(function () {
                            uni.stopPullDownRefresh()
                        },500);
                        if (err.message){
                            uni.showToast({
                                title: err.message,
                                icon: 'none'
                            })
                        }
                    });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .add-friend {
        width: 600 upx;
        height: 460 upx;
        padding: 0 40 upx;
        border-radius: 10 upx;
        background-color: #FFF;
        position: relative;

        .close {
            position: absolute;
            right: 20 upx;
            top: 20 upx;
        }

        .title {
            height: 120 upx;
            font-size: 32 upx;
            text-align: center;
            line-height: 120 upx;
        }

        .input {
            height: 80 upx;
            padding: 0 30 upx;
            border-radius: 10 upx;
            margin: 40 upx 0 80 upx;
            border: 2 upx solid #ddd;
        }

        .btn {
            color: #FFF;
            height: 80 upx;
            line-height: 80 upx;
            text-align: center;
            border-radius: 10 upx;
            background-color: #2CA246;

            &.disabled,
            &:active {
                opacity: 0.8;
            }
        }
    }

    .list {
        height: calc(100vh - 100upx - var(--status-bar-height));

        .item {
            width: 100vw;
            padding: 20 upx 30 upx 0;
            box-sizing: border-box;

            .cover {
                width: 80 upx;
                height: 80 upx;
                border-radius: 10 upx;
                box-sizing: border-box;
                border: 2 upx solid #f9f9f9;
                position: relative;

                .icon {
                    width: 100%;
                    height: 100%;
                    border-radius: 10 upx;
                }
            }

            .title {
                height: 100%;
                box-sizing: border-box;
                width: calc(100vw - 110upx - 60upx);
                position: relative;

                &::after {
                    content: '';
                    width: 100%;
                    height: 2 upx;
                    background-color: #F6F6F6;
                    position: absolute;
                    left: 0;
                    bottom: -34upx;
                }

                .main {
                    margin: 6 upx 0;

                    .text {
                        color: #333;
                        font-size: 32 upx;
                        font-weight: 600;
                    }

                    .time {
                        color: #666;
                        font-size: 24 upx;
                    }
                }
            }
        }
    }
</style>
